<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">我的积分</div>
      </div>
    </div>
    <div class="content">
      <div class="block">
        <p>{{points}}</p>
        <span>现有积分</span>
      </div>
      <div class="blocks">
        <p>充值金额</p>
        <div style="display: flex">
          <div class="blocks-div" v-for="(item, index) in policyList">
            <div :class="{ active: actOn == index }" @click="act(index, item)">
              {{item.rechargeAmount}}元
              <br/>
              <span v-if="item.givenAmount">
              增送{{item.givenAmount}}积分
            </span>
            </div>
          </div>
        </div>
        <div class="blocks-btn" @click="updateCompanyPoints">
          微信支付
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {Toast} from 'mint-ui'

export default {
  inject: ['reload'],
  name: 'integral',
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getPoint()
    this.getRechargePolicy()
  },
  mounted () {

  },
  // data() 为变量赋值等
  data () {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      actOn: null,
      selectPolicy: null,
      companyId: localStorage.getItem('cache_company_id'),
      points: '',
      policyList: [
        {rechargeAmount: 1, givenAmount: 1},
        {rechargeAmount: 10, givenAmount: 15},
        {rechargeAmount: 50, givenAmount: 80},
        {rechargeAmount: 150, givenAmount: 260}
      ]
    }
  },
  // methods 编写js函数
  methods: {
    back () {
      this.$router.go(-1) // 返回上一层
    },
    act (n, o) {
      this.actOn = n
      this.selectPolicy = o
    },
    updateCompanyPoints () {
      if (this.selectPolicy) {
        this.$http({
          method: 'get',
          url: Vue.prototype.AppURL + '/comuser/update/company/points',
          params: {id: this.companyId, points: this.selectPolicy.givenAmount}
        }).then(({ data }) => {
          if (data) {
            this.getPoint()
            return Toast('支付成功')
          }
        })
      }
    },
    getPoint () {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/comuser/get/company/detail',
        params: {id: this.companyId}
      }).then(({ data }) => {
        if (data) {
          this.points = data.memberPoints
        }
      })
    },
    getRechargePolicy () {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
}
.block {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  height: 200px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.block p {
  color: #3e63a8;
  font-size: 50px;
}
.block span {
  font-size: 14px;
  color: #757575;
}
.blocks {
  padding: 20px;
}
.blocks p {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding-bottom: 10px;
  align-items: center;
  font-size: 14px;
}
.blocks-div{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.blocks-div div{
  width: 130px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  box-shadow: 2px 2px 5px #c7c7c7;
  border: 1px solid #c7c7c7;
  border-radius: 10px;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
}
.blocks-div div span{
  display: inline-block;
  font-size: 12px;
  color: red;
}
.blocks-btn{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #3e63a8;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 30px;
}
.active{
  background: #3e63a8;
  color: #fff;
  border-color: #3e63a8;
  box-shadow: 0px 0px 0px !important;
}
</style>
